<template>
  <div class="policylibrary-manage">
      <div class="hr10"></div>
      <div class="policylibrary-manage-tab">
        <Tabs type="card" value="1" :animated="false">
          <TabPane name="1" label="我的跟踪管理">
            <Table :columns="columnList" :data="corporateDataList" size="large" :loading="loading"></Table>
          </TabPane>
          <TabPane name="2" label="分析网址管理">
            <div class="policylibrary-manage-forms">
              <div class="policylibrary-icontitle"><Icon type="md-attach" size="18" /><span style="padding-left:5px;">添加新网址</span></div>
              <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="100">
                  <FormItem label="网站名称：" prop="siteName">
                      <Input type="text" v-model="formInline.siteName" >
                      </Input>
                  </FormItem>
                  <FormItem label="链接地址：" prop="url">
                      <Input type="text" v-model="formInline.url" >
                         <Select v-model="select1" slot="prepend" style="width: 80px">
                            <Option value="http">http://</Option>
                            <Option value="https">https://</Option>
                        </Select>
                      </Input>
                  </FormItem>
                  <FormItem>
                    <Button type="default" @click="handleReset('formInline')" style="margin-right:10px;">清除</Button>
                    <Button type="primary" @click="handleSubmit('formInline')">添加</Button>
                  </FormItem>
              </Form>              
            </div>
            <div class='policylibrary-sitelist'>
                <div class='site-inner'>
                  <div class="policylibrary-icontitle"><Icon type="ios-list-box-outline" size="18" /><span style="padding-left:5px;">全部网址</span></div>
                  <Table :columns="columnSite" :data="siteDataList" size="large" :loading="loading"></Table>
                </div>
                <div class='site-space'>
                  <div class="site-space-inner">
                    <Icon type="md-swap" />
                  </div>
                </div>
                <div class='site-inner'>
                  <div class="policylibrary-icontitle"><Icon type="ios-list-box-outline" size="18" /><span style="padding-left:5px;">分析名单</span></div>
                  <Table :columns="columnTarget" :data="targetDataList" size="large" :loading="loading"></Table>
                </div>
            </div>
          </TabPane>
        </Tabs>
      </div>

  </div>
</template>
<script>
function filtercontent(str){
  str=str.replace(/\s+/g,""); //去除空格
  return str;
}
function formatDate () {
  var date = new Date();
  var y = date.getFullYear();
  var MM = date.getMonth() + 1;
  MM = MM < 10 ? ('0' + MM) : MM;
  var d = date.getDate();
  d = d < 10 ? ('0' + d) : d;
  return y + '-' + MM + '-' + d;
}
  export default {
    name: "PolicyLibraryManage",
    data(){
      return{
        policy_library:'PolicyLibraryManage',
        loading:false,
        total:0,
        pageSize:5,
        pageNum:1,
        currentPage:1,        
        currentIndustryName:"",//当前选择的分类
        select1: 'http',
        ids:[],//分析名单数值
        formInline: {
            siteName: '',
            url: ''
        },
        ruleInline: {
            siteName: [
                { required: true, message: '请输入网站名称', trigger: 'blur' }
            ],
            url: [
                { required: true, message: '请输入链接地址', trigger: 'blur' },
                { type: 'string', min: 3, message: '链接地址格式有误', trigger: 'blur' }
            ]
        },
        columnList:[

          {
            title:'分类',
            key:'type',
            align:'center',
            width:150
          },{
            title:'标题',
            key:'title',
            align:'center',
            render:(h,params)=>{
              return h("div",{
                class:'policytitlecontent'
              },[
                h("div",
                 {
                   style:{
                     fontSize:'14px',
                     textAlign:'left'
                   },
                    on:{
                          click:()=>{
                            this.$router.push({path:'detail/type/1/id/'+params.row.id});
                          }
                    }
                 },params.row.title),
                h("div",
                 {
                   style:{
                     fontSize:'12px',
                     color:'#999999',
                     textAlign:'left'
                   },
                    on:{
                          click:()=>{                            
                            this.$router.push({path:'detail/type/1/id/'+params.row.id});
                          }
                    },
                   class:'policy-contentfilter'
                 },filtercontent(params.row.textContent)),
              ])
            }
          },{
            title:'发布时间',
            key:'publishDate',
            align:'center',
            width:120
          },{
              title:'操作',
              align:'center',
              width:100,
              render:(h,params)=>{
                  return h("Button",{
                      props:{
                          type:'default',
                          size:'small'
                      },
                      on:{
                          click:()=>{                            
                            this.setfollow(params.row.id);
                          }
                      }
                  },"取消跟踪");
              }
            }
        ],
        currentFollow:0,
        corporateDataList:[],
        siteDataList: [],//全部网址
        columnSite:[
          {
            title:'网站名称',
            key:'siteName',
            align:'center',
            width:150
          },
          {
            title:'链接地址',
            key:'url',
            align:'center'
          },
          {
            title:'操作',
            align:'center',
            width:120,
            render: (h, params) => {
                return h('div', [
                    h('Poptip',{
                      props:{
                        confirm:true,
                        size:'large',
                        title:'确定要删除吗？'
                      },
                      on:{
                        'on-ok':()=>{
                          this.remove(params.row.id);
                        }
                      }
                    },[
                      h('Button',{
                        props:{
                          type:'error',
                          size:'small',
                          icon:'md-close'
                        },
                        style:{
                          marginRight:'5px'
                        }
                      })
                    ]),
                    
                    h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small',
                            icon:'md-add'
                        },                        
                        on: {
                            click: () => {
                                this.addRightList(params.row.id);
                            }
                        }
                    })
                ]);
            }
          }
        ],
        targetDataList: [],//分析名单
        columnTarget:[
          {
            title:'网站名称',
            key:'siteName',
            align:'center',
            width:150
          },
          {
            title:'链接地址',
            key:'url',
            align:'center'
          },
          {
            title:'操作',
            align:'center',
            width:120,
            render: (h, params) => {
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small',
                            icon:'md-remove'
                        },                        
                        on: {
                            click: () => {
                                this.removeRightList(params.row.id);
                            }
                        }
                    })
                ]);
            }
          }
        ]
      }
    },
    components:{
        
    },
    methods:{
      getpolicyData(){//列表数据
        if (this.loading) return; // 避免多次请求
        this.loading = true;
        let url=this.$url.baseUrl+'/consulting-library/api/policy/policy';
        this.$http.get(url,{
          params:{
            follow:1,
            pageSize:this.pageSize,
            pageNum:this.pageNum
          }
        }).then(response =>{
            let result=response.data
            if (result.meta.success){
              //console.log(result.data);
              this.loading = false;
              this.corporateDataList=result.data.list;
              this.total=result.data.total;
            }else {
              console.log("获取数据失败")
            }
        })
      },
      changeLibraryPage(index){
        this.pageNum=index;
        this.getpolicyData();
      },
      selectPage(index){
        this.pageSize=index;
        this.getpolicyData();
      },
      setfollow(id,follow){        
        let url=this.$url.baseUrl+'/consulting-library/api/policy/follow';
        this.$http.get(url,{
          params:{
            id,
            follow:0
          }
        }).then(response =>{
            let result=response.data
            if (result.meta.success){
              this.$Message.success(result.data, 3);
              this.getpolicyData();//更新列表数据
            }else {
              this.$Notice.warning({
                    title: '抱歉，您的跟踪数量已达上限',
                    desc: '请前往“跟踪设置”进行取消跟踪操作',
                    duration: 3
              });
              console.log("获取数据失败");
            }
        })
      },
      handleSubmit (name) {//提交表单
          this.$refs[name].validate((valid) => {
              if (valid) {
                  
                  let url=this.$url.baseUrl+'/consulting-library/api/policy/site'
                  let params=this.formInline;
                  params.url=this.select1+'://'+this.formInline.url;
                  params.createTime=formatDate();
                  this.$http({
                    method:"POST",
                    url:url,
                    data:params
                  }).then(response =>{
                    let result=response.data
                    if (result.meta.success){
                      this.$Message.success('添加成功');
                      this.handleReset('formInline');//重置表单
                      this.getALLsitedata();//更新网址列表
                    }else{
                      this.$Message.error(result.meta.message);
                    }
                  });
              } else {
                  this.$Message.error('添加失败!');
              }
          })
      },
      handleReset (name) {//清空
          this.$refs[name].resetFields();
      },
      getALLsitedata(){//全部网址
        let url=this.$url.baseUrl+'/consulting-library/api/policy/site/all';
        this.$http.get(url).then(response =>{
            let result=response.data
            if (result.meta.success){
              //console.log(result.data,'全部网址');
              this.siteDataList=result.data;
            }else {
              console.log("获取数据失败")
            }
        })
      },
      getTargetdata(){//分析名单
        let url=this.$url.baseUrl+'/consulting-library/api/policy/site/analyses';
        this.$http.get(url).then(response =>{
            let result=response.data
            if (result.meta.success){
              this.targetDataList=result.data;
              this.ids=[];//初始化ids值
              result.data.forEach((item)=>{                
                this.ids.push(item.id);
              })
            }else {
              console.log("获取数据失败")
            }
        })
      },
      remove (id) {//删除网址
          let url=this.$url.baseUrl+'/consulting-library/api/policy/site';
          this.$http.delete(url,{
            params:{
              id:id
            }
          }).then(response =>{
              let result=response.data
              if (result.meta.success){
                this.getALLsitedata();//更新网址列表
                this.$Message.success('删除网址成功');
              }else {
                console.log("获取数据失败")
              }
          })
      },
      addRightList(id){//添加至分析名单
        let ids=this.ids;
        ids.push(id);
        this.updateList();
      },
      removeRightList(id){//移除分析名单
        let ids=this.ids;
        let lastArr=ids.indexOf(id);//移除第几个
        ids.splice(lastArr, 1);
        this.updateList();
      },
      updateList(){//移除分析名单
        let url=this.$url.baseUrl+'/consulting-library/api/policy/site/analyses';
        let ids=[0];
        if(this.ids.length>0){
          ids=this.ids;
        }
        this.$http.put(url,ids).then((response) =>{
          let result=response.data;
          if (result.meta.success){
            this.$Message.success({content:'分析名单保存成功',duration:1});
            this.getTargetdata();
            this.getALLsitedata();
          }
        }) 
      }
    },
    mounted() {
      this.getpolicyData();
      this.getALLsitedata();
      this.getTargetdata();
      //console.log(this.$route.name,'$route.name');
      this.$store.state.hidemenu=true;//显示菜单项
      this.$store.state.submenuname='PolicyLibraryManage';//选中
    },
    watch:{
      ids(){
        //console.log('我更新了');
      }
    },
    created(){

    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + MM + '-' + d;
      }
    }

  }
</script>
<style>
.policylibrary-manage-tab > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
    border-radius: 0;
    background: #fff;
}
.policylibrary-manage-tab > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
    border-top: 1px solid #3399ff;
}
.policylibrary-manage-tab > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #3399ff;
    position: absolute;
    top: 0;
    left: 0;
}
.policy-contentfilter{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.policy-titlefilter{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.policytitlecontent{
  padding:8px 0;
  cursor: pointer;
}
.policylibrary-sitelist .ivu-table-wrapper{
  overflow:inherit;
}
.policylibrary-sitelist .ivu-poptip-confirm .ivu-poptip-body .ivu-icon{
  left:20px;
}
</style>
<style rel="stylesheet/less" lang="less" scoped>
.displayflex(){
  -webkit-display: flex;
  -moz-display: flex;
  display: flex;
}
.flexdiv(){
  -webkit-flex:1;
  -moz-flex:1;
  flex:1;
}
.hr10{
  height: 10px;
  line-height: 0;
  font-size: 0;
}
.hr20{
  height: 20px;
  line-height: 0;
  font-size: 0;
}

.policylibrary-manage{
  width: 100%;
  .policylibrary-sitelist{
    .displayflex();
  }
  .site-space{
    width:50px;
    .site-space-inner{
      .displayflex();
      height:100%;
      align-items: center;
      justify-content: center;
      .ivu-icon{
        font-size: 24px;
      }
    }    
  }
  .site-inner{
    width:500px;
    .flexdiv();
  }
}
.ulist{
  li{
    list-style: none;
    margin:0;
    padding:0;
    line-height: 35px;
    height: 35px;
    overflow: hidden;
    font-size:14px;
    .displayflex();
    a{
      color: #222222;
      display: inline-block;
    }
    span{
      color:#999999;
      width: 100px;
      padding-right: 5px;
      text-align: right;
      margin-left: auto;
      display: inline-block;
    }
  }
}
.policylibrary-manage-tab{width:100%;overflow-x:hidden;}
.policylibrary-manage-forms{
  width:600px;
}
.policylibrary-icontitle{
  margin-bottom:10px;
}
</style>
